<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/layout">
<title layout:fragment="title">账单明细</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a th:href="@{/pmbill/needpay/}">未缴账单</a>
            </li>
            <li class="active">明细</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="col-sm-12">
            <h4 class="header blue ">账单总览</h4>
        </div>
        <view id="bill-view-div" class="form-horizontal">
            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 房号： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="houseNumber" readonly id="view-houseNumber" th:value="${bill.houseNumber}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 住户名称： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="userName" readonly id="view-userName" th:value="${bill.userName}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 手机号码： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="userMobile" readonly id="view-userMobile" th:value="${bill.userMobile}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 费用时间： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" name="duration" readonly id="view-duration" th:value="${bill.duration}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 账单金额： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="number" name="totalAmount" readonly id="view-totalAmount" th:value="${bill.totalAmount}"
                           class="col-xs-10 col-sm-5 form-show"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 出账日期： </label>
                <div class="col-sm-9">
                    <input style="background-color: #fff!important;" type="text" readonly class="input-small col-xs-10 col-sm-5 form-show"
                           th:value="${#calendars.format(bill.releaseTime,'yyyy-MM-dd')}" readonly="readonly"
                           name="releaseTime" id="view-releaseTime"/>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 备注： </label>
                <div class="col-sm-9">
                    <textarea name="remark" readonly id="view-remark" th:text="${bill.remark}" rows="5"
                              class="col-xs-10 col-sm-5 form-show"></textarea>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 clearfix">
                <div class="col-sm-4 col-sm-offset-4">
                    <button class="btn btn-info btn-sm col-sm-6" type="button" id="edit-btn">
                        编辑
                    </button>
                </div>
            </div>
        </view>
        <form method="post" th:action="@{/pmbill/needpay/save}" id="bill-view-form" class="form-horizontal hide">
            <input type="hidden" id="billId" name="id" th:value="${bill.id}" value=""/>
            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 房号： </label>
                <div class="col-sm-9">
                    <input type="text" name="houseNumber" id="houseNumber" th:value="${bill.houseNumber}" placeholder="请输入房号"
                           class="col-xs-10 col-sm-5"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="账单对应房号" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 住户名称<span class="red">*</span>：</label>
                <div class="col-sm-9">
                    <input type="text" name="userName" id="userName" th:value="${bill.userName}" placeholder="请输入住户名称"
                           class="col-xs-10 col-sm-5"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="账单对应住户名称" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 手机号码<span class="red">*</span>：</label>
                <div class="col-sm-9">
                    <input type="text" name="userMobile" id="userMobile" th:value="${bill.userMobile}" placeholder="请输入住户手机号码"
                           class="col-xs-10 col-sm-5"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="账单对应住户手机号码" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 费用时间<span class="red">*</span>：</label>
                <div class="col-sm-9">
                    <input type="text" name="duration" id="duration" th:value="${bill.duration}" placeholder="请输入费用时间"
                           class="col-xs-10 col-sm-5"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="描述费用起止时间，如2018年7-9月" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 账单金额<span class="red">*</span>：</label>
                <div class="col-sm-9">
                    <input type="number" name="totalAmount" id="totalAmount" th:value="${bill.totalAmount}" placeholder="请输入账单金额"
                           class="col-xs-10 col-sm-5"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="账单总金额" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 出账日期<span class="red">*</span>：</label>
                <div class="col-sm-9">
                    <input type="text" class="input-small date-picker col-xs-10 col-sm-5"
                           th:value="${#calendars.format(bill.releaseTime,'yyyy-MM-dd')}" readonly="readonly" name="releaseTime" id="releaseTime"/>
                    <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                          data-content="出账日期" title="" data-original-title="">?</span>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 form-group">
                <label class="col-sm-3 control-label no-padding-right"> 备注： </label>
                <div class="col-sm-9">
                    <textarea name="remark" id="remark" placeholder="请输入账单备注信息" th:text="${bill.remark}" rows="5"
                              class="col-xs-10 col-sm-5"></textarea>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="col-sm-12 clearfix">
                <div class="col-sm-4 col-sm-offset-4">
                    <button class="btn btn-info btn-sm col-sm-6" type="button" id="submit-btn">
                        <i class="icon-ok bigger-110"></i>
                        保&nbsp;&nbsp;存
                    </button>
                </div>
            </div>
        </form>

        <div class="col-sm-12">
            <h4 class="header blue ">费用明细</h4>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-12">
                <a href="javascript:void(0)" class="btn btn-primary btn-sm" id="add-item-btn">
                    <i class="icon-plus icon-on-right bigger-120" style="top: 2px"></i> 添加费用项</a>
            </div>
            <hr/>
            <table id="dataTable" class="table table-bordered table-striped dataTable"
                   aria-describedby="tradeTable_info">
                <thead class="thin-border-bottom"></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <div id="item-modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header"></div>
                <div class="modal-body">
                    <div class="form-horizontal" role="form">
                        <input type="hidden" name="id"/>
                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">费用名称<span class="red">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" id="costName" name="costName" placeholder="请输入费用名称" class="col-xs-8 col-sm-8">
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="账单费用名称" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">单价</label>
                            <div class="col-sm-9">
                                <input style="background-color: #fff!important;" type="number" id="unitPrice" name="unitPrice" placeholder="请输入费用单价" class="col-xs-8 col-sm-8">
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="单价必须大于0" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="space-4"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">数量</label>
                            <div class="col-sm-9">
                                <input style="background-color: #fff!important;" type="number" id="number" name="number" placeholder="请输入数量" class="col-xs-8 col-sm-8">
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="数量必须大于0" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">金额<span class="red">*</span></label>
                            <div class="col-sm-9">
                                <input type="number" id="amount" name="amount" placeholder="请输入费用金额" class="col-xs-8 col-sm-8">
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="金额大于必须大于0" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">开始日期<span class="red">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="input-small date-picker col-xs-10 col-sm-5" readonly="readonly"
                                       name="startDay" id="startDay"/>
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="费用开始日期" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right">结束日期<span class="red">*</span></label>
                            <div class="col-sm-9">
                                <input type="text" class="input-small date-picker col-xs-10 col-sm-5" readonly="readonly"
                                       name="endDay" id="endDay"/>
                                <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="right"
                                      data-content="费用结束日期" title="" data-original-title="">?</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"> 备注： </label>
                            <div class="col-sm-9">
                                <input type="text" name="remark" id="remark1" placeholder="请输入备注信息" class="col-xs-8 col-sm-8">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success btn-sm" id="save-item-btn">
                        <i class="icon-save"></i>
                        保存
                    </button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/pmneedpaybill/detail.js}"></script>
</body>
</html>